<template>
  <div class="cart">
    <!------------------------------------------------------返回导航------------------------------------------------------------------>
    <HeaderTitle :title="WebName"></HeaderTitle>
    <!-- 刷新框架 -->
    <van-pull-refresh v-model="MainLoading" @refresh="onRefresh">
      <div class="container">
        <van-checkbox-group class="card-goods" v-model="checkedGoods">
        <van-checkbox class="card-goods__item" v-for="item in goods" :key="item.id" :name="item.id">
          <van-card
            :title="item.title"
            :desc="item.desc"
            :num="item.num"
            :price="formatPrice(item.price)"
            :thumb="item.thumb"
          ></van-card>
        </van-checkbox>
      </van-checkbox-group>
      </div>

    </van-pull-refresh>

    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      :disabled="!checkedGoods.length"
      @submit="onSubmit"
    >
      <!-- <van-checkbox v-model="checked">全选</van-checkbox> -->
    </van-submit-bar>
  </div>
</template>
<script>
/* ... */
import HeaderTitle from '@/components/HeaderTitle.vue'
export default {
  name: 'shopping',

  mixins: [],

  components: {
    HeaderTitle
  },

  props: {},

  data () {
    return {
      WebName: '购物车',
      count: 0, // 下拉刷新次数
      MainLoading: false, // 下拉刷新
      checked: false, // 全选
      checkedGoods: ['1', '2', '3'],
      goods: [
        {
          id: '1',
          title: '进口香蕉',
          desc: '约250g，2根',
          price: 200,
          num: 1,
          thumb:
            'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
        },
        {
          id: '2',
          title: '陕西蜜梨',
          desc: '约600g',
          price: 690,
          num: 1,
          thumb:
            'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
        },
        {
          id: '3',
          title: '美国伽力果',
          desc: '约680g/3个',
          price: 2680,
          num: 1,
          thumb:
            'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
        }
      ]
    }
  },

  computed: {
    totalPrice () {
      return this.goods.reduce(
        (total, item) =>
          total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0),
        0
      )
    }
  },

  watch: {},

  created () {},

  mounted () {},

  destroyed () {},

  methods: {
    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.MainLoading = false
        this.count++
      }, 500)
    },
    onSubmit () {
      this.$toast('提交订单被点击')
    },
    formatPrice (price) {
      return (price / 100).toFixed(2)
    }
  }
}
</script>

<style lang="less" >
/* ... */

.container {
  margin: 0 15px;
}
.cart {
  height: 100%;
  background-color: #f6f6f6;
  .van-pull-refresh {
    height: calc(100% - 50px - 45px);
    overflow-y: auto;
    .card-goods {
      margin-top: 10px;
      padding: 10px 0;
      background-color: #fff;
      border-radius: 4px;

      &__item {
        position: relative;
        background-color: #fafafa;
        margin-bottom: 10px;

        .van-checkbox__label {
          width: 100%;
          height: auto; // temp
          padding: 0 10px 0 15px;
          box-sizing: border-box;
        }

        .van-checkbox__icon {
          top: 50%;
          left: 10px;
          z-index: 1;
          position: absolute;
          margin-top: -10px;
        }

        .van-card__price {
          color: #f44;
        }
      }
    }
  }
  // 提交订单边栏
  .van-submit-bar {
    .van-submit-bar__bar {
      .van-checkbox {
        margin-left: 10px;
      }
      .van-submit-bar__text {
        .van-submit-bar__price {
          color: #ff7c00;
        }
      }
      .van-button--danger {
        background-color: #d7b782;
        border: 0.02667rem solid #d7b782;
      }
    }
  }
}
</style>
